<template>
    <view>
        <mescroll-uni
            class="scroll-box"
            :ref="'mescrollRef' + i"
            @init="mescrollInit"
            :height="state == 20 ? sublistHeight : height"
            :down="downOption"
            @down="downRefresh"
            :up="upOption"
            @up="getData">
            <!-- <notice-bar :length="OtherData" v-if="OtherData>0&&state!=3&&state!=4"></notice-bar> -->
            <!-- <notice-send-bar :length="RecordAmout" v-if="RecordAmout>0&&state==3"></notice-send-bar> -->
            <notice-send-bar :length="RecordAmout" v-if="RecordAmout > 0 && state != 4" :text="text"></notice-send-bar>
            <!-- <task-card :state="state" :data="data" :length="RecordAmout" v-if="RecordAmout>0&&state!=3" :class="state==4||OtherData<=0?'card-4':'card-1'" @changeFn="changeFn"></task-card> -->
            <view class="product-evaluate-list">
                <list-item
                    v-for="(item, ind) in datas"
                    @selectNum="selectNum"
                    :key="ind"
                    :data="item"
                    :state="state"
                    :title="title"
                    @showTel="showTel">
                </list-item>
            </view>
        </mescroll-uni>
        <block v-if="datas.length > 0">
            <view class="footer footer1" v-if="state == 20">
                <view class="btn1" @click="all(allstatus)">{{ allselect }}</view>
                <view class="btn3" @click="shelf(1)"
                    >批量配送<text v-if="num > 0">({{ num }})</text></view
                >
            </view>
        </block>
    </view>
</template>
<script>
import { OrderPage } from "@/pages_tms/service/logistics.js"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
import taskCard from "@/pages_tms/components/order/task-card.vue"
import noticeBar from "@/pages_tms/components/order/notice-bar.vue"
import noticeSendBar from "@/pages_tms/components/order/notice-send-bar.vue"
import listItem from "@/pages_tms/components/order/list-item.vue"
export default {
    components: {
        taskCard,
        noticeBar,
        noticeSendBar,
        listItem,
    },
    props: {
        i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
        height: {
            type: String,
            default: "100px",
        },
        sublistHeight: {
            type: String,
            default: "100px",
        },
        title: {
            type: String,
            default: "",
        },
        index: {
            // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
            type: Number,
            default: 0,
        },
        state: {
            type: Number,
            default: 0,
        },
        currentIndex: {
            type: Number,
            default: 0,
        },
        repositoryId: {
            type: Number,
            default: 0,
        },
        params: {
            type: Object,
            default: () => {},
        },
        initData: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            datas: [],
            data: {},
            productList: [],
            isList: true,
            RecordAmout: -1,
            OtherData: 0,
            location: "",
            allselect: "全选",
            num: 0,
        }
    },
    mounted() {},
    computed: {
        text() {
            let state = this.state
            let text = ""
            console.log(state)
            switch (state) {
                case 1:
                    text = "待取货"
                    break
                case 2:
                    text = "待配送"
                    break
                case 3:
                    text = "正在配送中"
                    break
                default:
                    break
            }
            return text
        },
    },
    watch: {
        initData(newV, oldV) {
            this.mescroll.resetUpScroll()
        },
    },
    methods: {
        refresh(param) {
            if (param) {
                this.params = param
            }
            console.log(this.params)
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        //获取列表数据
        getData(page) {
            console.log(this.i)
            console.log(this.currentIndex)
            console.log(this.repositoryId)
            if (this.i != this.currentIndex) {
                this.$emit("endErr")
                return false
            }
            let param = this.params
            param.pageSize = page.size
            param.pageIndex = page.num
            param.status = this.state
            param.repositoryId = this.repositoryId
            console.log(param)

            if (param.location) {
                this.orderPage(param, page)
            } else {
                getLocation(
                    (res) => {
                        console.log(res)
                        param.location = res.longitude + "," + res.latitude
                        this.orderPage(param, page)
                    },
                    (error) => {
                        console.log(this)
                        console.log(error)
                        this.orderPage(param, page)
                    },
                )
            }
        },
        orderPage(param, page) {
            OrderPage(param)
                .then((res) => {
                    console.log(res)
                    console.log(this)
                    if (res.State == 1) {
                        this.RecordAmout = res.RecordAmout
                        this.OtherData = res.OtherData
                        this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                        if (page.num == 1) this.datas = [] //如果是第一页需手动制空列表
                        res.Data.forEach((e) => {
                            e.checked = false
                        })
                        this.datas = this.datas.concat(res.Data)
                        this.data = this.datas[0] || {}
                    } else {
                        this.easyToast(res.Msg)
                        this.mescroll.endErr()
                    }
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr()
                })
        },
        changeFn(state) {
            this.$emit("changeFn", state)
        },
        showTel(data) {
            this.$emit("showTel", data)
        },
        all(status) {
            this.datas.forEach((e) => {
                e.checked = status
                if (e.checked) {
                    this.allselect = "取消全选"
                } else {
                    this.allselect = "全选"
                }
            })
            this.allstatus = !status
            this.selectNum()
        },
        selectNum() {
            let num = 0
            this.ids = []
            this.datas.forEach((e) => {
                if (e.checked) {
                    num++
                    this.ids.push(e.ID)
                }
            })
            console.log(this.ids)
            this.num = num
            if (num < this.datas.length) {
                this.allselect = "全选"
                this.allstatus = true
            } else {
                this.allselect = "取消全选"
                this.allstatus = false
            }
        },
    },
}
</script>

<style lang="scss">
.record-list {
    margin: $app-page-padding;
    border-radius: 16rpx;
    // overflow: hidden;
}

.scroll-box {
    // padding: $app-page-padding ;
    box-sizing: border-box;

    .card-1 {
        padding: 0 $app-page-padding;
        background: linear-gradient(#fff 0%, #fff 50%, transparent 50%, transparent 100%);
    }

    .card-4 {
        padding: $app-page-padding $app-page-padding 0;
        background: linear-gradient(#fff 0%, #fff 50%, transparent 50%, transparent 100%);
    }

    .product-evaluate-list {
        padding: $app-page-padding;
    }
}

.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
        width: 4rpx;
        height: 50rpx;
    }
    view {
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn2,
    .btn3 {
        color: $app-color-main;
    }
}
.footer1 {
    view {
        width: 50%;
    }
}
</style>
